import React, { useContext } from 'react';
import cls from 'classnames';
import { Steps } from 'antd';
import { ResourcesContext } from '../hooks';
import MyIcon from '@/components/MyIcon';
import { IResouRootSteps } from '../type';

export const ResouRootSteps: React.FC<IResouRootSteps> = () => {
  const { prefixCls, resourCurrent, commonDispatch } = useContext(
    ResourcesContext,
  );

  const steps = [
    {
      title: '资源菜单',
      icon: <MyIcon type="icon-renwu1" />,
    },
    {
      title: '数据范围',
      icon: <MyIcon type="icon-fanwei" />,
    },
    {
      title: '功能操作',
      icon: <MyIcon type="icon-piliang1" />,
    },
  ];

  // 点击步数改变tab
  const chanageStep = (stepsKey: number) => {
    commonDispatch({
      type: 'chanage-current',
      payload: stepsKey,
    });
  };

  return (
    <>
      <div className={cls(prefixCls + 'stepTitle', 'current-step-title')}>
        <Steps current={resourCurrent} items={steps} onChange={chanageStep} />
      </div>
    </>
  );
};
